// 注册鼠标进入节点变红的行为
G6.registerBehaviour('mouseEnterFillRed', graph=>{
  graph.behaviourOn('node:mouseenter', ev=>{
    graph.update(ev.item, {
      color: 'red'
    });
  });
});

// 注册鼠标进入节点变绿的行为
G6.registerBehaviour('mouseEnterFillGreen', graph=>{
  graph.behaviourOn('node:mouseenter', ev=>{
    graph.update(ev.item, {
      color: 'green'
    });
  });
});

// 注册鼠标移出节点变原色的行为
G6.registerBehaviour('mouseLeaveResetFill', graph=>{
  graph.behaviourOn('node:mouseleave', ev=>{
    graph.update(ev.item, {
      color: '#2f54eb'
    });
  });
});
const data = {
  nodes: [{
    id: '事件',
    x: 80,
    y: 150,
  },{
    id: '行为',
    x: 200,
    y: 150
  },{
    id: '模式',
    x: 320,
    y: 150
  }],
  edges: [{
    source: '事件',
    target: '行为',
    label: '组成'
  },{
    source: '行为',
    target: '模式',
    label: '组成'
  }]
};
let mode = 'red';
const graph = new G6.Graph({
  container: 'mountNode',
  width: 500,
  height: 500,
  modes: {
    red: ['mouseEnterFillRed', 'mouseLeaveResetFill'],
    green: ['mouseEnterFillGreen', 'mouseLeaveResetFill']
  },
  mode,
});
graph.node({
  label(model) {
    return model.id;
  }
});
graph.edge({
  style() {
    return {
      endArrow: true
    };
  }
});
graph.read(data);

// 点击按钮切换模式
document.getElementById('changeMode').onclick = () => {
  if(mode === 'red') {
    graph.changeMode('green');
    mode = 'green';
  } else {
    graph.changeMode('red');
    mode = 'red';
  }
};